<template>
  <el-dialog :visible="dialogVisible" width="500px" :title="id === 0 ? '新增资产信息' : '修改资产信息'" :before-close="handleClose"
    center>
    <div style="margin: 0 80px;">
    <el-form :model="asset" label-position="left" label-width="80px"  size="mini">
      <el-form-item label="名称">
        <el-input v-model="asset.name" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-cascader
          style="width: 200px;"
          v-model="asset.cid"
          :options="categoryList"
          :props="{ expandTrigger: 'hover', label: 'name', value: 'id', emitPath: false }">
        </el-cascader>
      </el-form-item>
      <el-form-item label="品牌">
        <el-select v-model="asset.brandId" style="width: 200px;">
          <el-option v-for="brand in brandList" :key="brand.id" :label="brand.name" :value="brand.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="asset.depaId" @change="asset.depoId = ''" style="width: 200px;">
          <el-option v-for="department in depaList" :key="department.id" :label="department.name" :value="department.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库">
        <el-select v-model="asset.depoId" style="width: 200px;">
          <el-option v-for="depository in depoFilter" :key="depository.id" :label="depository.name" :value="depository.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="asset.number" :disabled="id !== 0" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="单价" >
        <el-input v-model="asset.price" :disabled="id !== 0" style="width: 200px;">
          <template slot="append">￥</template>
        </el-input>
      </el-form-item>
      <el-form-item label="净残值" >
        <el-input v-model="asset.netSalvage"  :disabled="id !== 0" style="width: 200px;">
          <template slot="append"><span>￥</span></template>
        </el-input>
      </el-form-item>
      <el-form-item label="入库日期">
        <el-date-picker v-model="asset.putDate" type="date" placeholder="选择日期" style="width: 200px;" :disabled="id !== 0"></el-date-picker>
      </el-form-item>
    </el-form>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="submit()">提 交</el-button>
      <el-button type="infor" @click="close()">取 消</el-button>
    </div>

  </el-dialog>
</template>

<script>
import * as asset from '@/api/asset'

export default {
  name: 'AssetForm',
  props: ['dialogVisible', 'id', 'depaList', 'depoList', 'brandList', 'categoryList'],
  data () {
    return {
      asset: {}
    }
  },
  watch: {
    dialogVisible: function (val) {
      // close
      if (!val) {
        this.asset = {}
        return
      }
      // insert
      if (this.id === 0) {
        this.asset = { depoId: '' }
        return
      }
      // update
      asset.selectById(this.id).then(resp => {
        this.asset = resp.data
      }).catch(error => {
        console.log(`[asset-form:select:id:${this.id}] - ${error.response.data.message}`)
      })
    }
  },
  computed: {
    /* 更新与部门匹配的仓库信息 */
    depoFilter: function () {
      return this.depoList.filter(item => item.depaId === this.asset.depaId)
    }
  },
  methods: {
    // 提交表单
    submit () {
      if (this.id === 0) {
        this.insertAsset()
      } else {
        this.updateAsset()
      }
    },
    insertAsset () {
      console.log(`[asset-form:insert]`)
      asset.insert(this.asset).then(resp => {
        this.$notify.success({title: '提示', message: '资产信息已保存'})
        this.$emit('success')
        this.close()
      }).catch(error => console.log(error))
    },
    updateAsset () {
      console.log(`[asset-form:update:id]:${this.id}`)
      asset.update(this.asset).then(resp => {
        this.$notify.success({title: '提示', message: '资产信息已更新'})
        this.$emit('success')
        this.close()
      }).catch(error => console.log(error))
    },
    close () {
      this.$emit('update:dialogVisible', false)
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(() => {
        this.close()
        done()
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
  .dialog-footer {
    text-align: center;
  }
</style>
